import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutterDemo/pages/auth/login_page.dart';
import 'package:flutterDemo/pages/personal/personal_vm.dart';
import 'package:flutterDemo/route/RouteUtils.dart';
import 'package:provider/provider.dart';

class PersonalPage extends StatefulWidget {
  const PersonalPage({super.key});

  @override
  State createState() {
    return _PersonalPageState();
  }
}

class _PersonalPageState extends State<PersonalPage> {
  PersonalViewModel viewModel = PersonalViewModel();

  @override
  void initState() {
    super.initState();
    viewModel.initDate();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (context) {
          return viewModel;
        },
        child: Scaffold(
            body: SafeArea(
          child: Column(
            children: [
              _header(() {
                if (viewModel.shouldLogin) {
                  RouteUtils.push(context, const LoginPage());
                }
              }),
              _settingItem("我的收藏", () {}),
              _settingItem("检查更新", () {}),
              _settingItem("关于我们", () {}),
              Consumer<PersonalViewModel>(builder: (context, vm, child) {
                if (vm.shouldLogin) {
                  return const SizedBox();
                } else {
                  return _logoutBtn("退出登录", () {
                    viewModel.logout((value) {
                      RouteUtils.pushAndRemoveUntil(context, const LoginPage());
                    });
                  });
                }
              })
            ],
          ),
        )));
  }

  /// 退出登录按钮
  Widget _logoutBtn(String? title, GestureTapCallback? onPressed) {
    return Container(
      margin: const EdgeInsets.only(top: 100),
      width: MediaQuery.of(context).size.width * 0.6, // 宽度设置为屏幕宽度的60%,
      height: 48, // 设置按钮高度
      child: ElevatedButton(
        onPressed: onPressed, // 按钮点击事件
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.teal, // 浅绿色背景
          foregroundColor: Colors.white, // 文字颜色
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(24), // 圆角设置
          ),
          elevation: 2, // 阴影高度
          padding: const EdgeInsets.symmetric(vertical: 10), // 内边距
        ),
        child: Text(
          title ?? "点击按钮",
          style: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  }

  Widget _settingItem(String? title, GestureTapCallback? onTap) {
    return GestureDetector(
        onTap: onTap,
        child: Container(
            padding: const EdgeInsets.only(left: 10, right: 10),
            width: double.infinity,
            height: 40,
            margin: const EdgeInsets.only(left: 15, right: 15, top: 15),
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.grey,
                width: 0.5,
              ),
              borderRadius: const BorderRadius.all(Radius.circular(5)),
            ),
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    title ?? "",
                    style: const TextStyle(color: Colors.black, fontSize: 13),
                  ),
                  Image.asset(
                    "assets/images/img_arrow_right.png",
                    width: 20,
                    height: 20,
                  )
                ])));
  }

  Widget _header(GestureTapCallback? onTap) {
    return Container(
      alignment: Alignment.center,
      width: double.infinity,
      height: 200,
      color: Colors.teal,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GestureDetector(
            onTap: onTap,
            child: ClipOval(
              child: Image.asset(
                'assets/images/photo.jpeg',
                width: 70,
                height: 70,
              ),
            ),
          ),
          const SizedBox(
            height: 6,
          ),
          Consumer<PersonalViewModel>(builder: (context, vm, child) {
            return GestureDetector(
              onTap: onTap,
              child: Text(
                vm.username ?? "",
                style: const TextStyle(color: Colors.white, fontSize: 13),
              ),
            );
          })
        ],
      ),
    );
  }
}
